<template>
	<view>
		<view class="flex-boderRadius-view padding-30 bg-fff margin-bottom30">
			<view class="fontSize-15 color-000 margin-bottom20">{{article_detail.title}}</view>
			<view class="flex-between margin-bottom20">
				<view class="fontSize-13 color-999">发布时间：{{article_detail.createtime}}</view>
			</view>
			<!-- <view class="fontSize-13 color-000 margin-bottom20" v-html="article_detail.content">
				{{article_detail.content}}
			</view> -->
			<u-parse style="color: #000000;font-size: 13px;" :content="article_detail.content"></u-parse>
			<!-- <view class="flex-center">
				<image :src="imageBaseurl+article_detail.image" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="flex-boderRadius-view padding-30 bg-fff">
			<view class="fontSize-18 color-000 margin-bottom50">全部评论</view>
			<view class="flex margin-bottom20" v-for="(item,index) in list" :key="index">
				<image class="img-68 margin-right20" style="border-radius: 50%;" :src="item.user.avatar" mode="">
				</image>
				<view class="flex-column f-divider1 flex1">
					<view class="fontSize-15 color-000 margin-bottom20">{{item.user.username}}</view>
					<view class="fontSize-13 color-999 margin-bottom20">{{item.createtime}}</view>
					<view class="fontSize-15 color-000 margin-bottom20">{{item.content}}</view>
				</view>
			</view>
		</view>

		<view style="height: 150rpx;"></view>
		<view class="position-fixed-bottom1 bg-fff flex-alignItems-center">
			<input class="flex1 input-fixed" type="text" adjust-position v-model="content" placeholder="说出你的想法吧~"
				confirm-type="done" @confirm="confirmInput" />
				<view style="height: 20rpx;"></view>
			<view class="flex-alignItems-center margin-left20">
				<view class="flex-justAliCenter-column">
					<button size="mini" style="backgroundColor:transparent;border:none;" open-type="share"
						class="index-btn" plain>
						<view class="flex-alignItems-center">
							<u-icon name="share-square" color="#666666" size="25"></u-icon>
							<view class="fontSize-15 color-000 margin-left10">{{article_detail.share_count}}</view>
						</view>
					</button>
				</view>
			</view>
		</view>
		<!-- 审核弹窗 -->
		<u-popup :show="checkShow" mode="center" round="20">
			<view class="popup-view flex-justAliCenter-column padding-30" style="width:400rpx;">
				<view class="fontSize-16 color-000 margin-bottom20">温馨提示</view>
				<view class="fontSize-13 color-000 margin-bottom50">为了保证良好的社区环境，您的评论需审核后才可发布。</view>
				<view class="info-popup-btn flex-center" @click="checkShow = false">我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				list: [],
				isLastPage: false,
				loading: false,
				article_id: '',
				content: '',
				article_detail: {},
				checkShow: false,
				imageBaseurl: ''
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			this.handleArticleShare()
			return {
				title: '武当山',
				path: '/pages/news/news-info?article_id=' + this.article_id,
				image: ''
			}
		},
		onShareTimeline() {
			this.handleArticleShare()
			return {
				title: '武当山',
				path: '/pages/news/news-info?article_id=' + this.article_id,
				image: ''
			}
		},
		onLoad(e) {
			this.imageBaseurl = this.$configImage
			this.article_id = e.article_id
			console.log()
		},
		onShow() {
			this.page = 1
			this.limit = 10
			this.list = []
			this.articleCommentList()
			this.articleDetail()
		},
		// 刷新 上拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.isLastPage = false
			this.list = []
			this.articleCommentList()
		},
		// 加载下一页 下拉加载
		onReachBottom() {
			if (this.list.length >= this.page * this.limit) {
				this.isLastPage = false;
				this.page += 1;
				this.articleCommentList();
			} else {
				this.isLastPage = true
			}
		},
		methods: {
			// 分享文章
			async handleArticleShare(){
			 let res = await this.$http.post(this.$api.article_share,{id:this.article_id},{token:true})
			},
			// 文章详情
			async articleDetail() {
				let res = await this.$http.post(this.$api.article_detail, {
					id: this.article_id
				}, {
					token: true
				})
				if (res.code == 1) {
					this.article_detail = res.data
				}
			},
			// 评论列表
			articleCommentList() {
				this.$http.post(this.$api.comment_list, {
					page: this.page,
					limit: this.limit,
					article_id: this.article_id
				}).then(res => {
					this.list = [...this.list, ...res.data]
				}).finally(() => {
					// 停止当前页面下拉刷新
					uni.stopPullDownRefresh();
				})
			},
			// 添加评论
			confirmInput() {
				if (!this.content) {
					return uni.showToast({
						title: '请填写评论',
						icon: 'none'
					})
				}
				this.$http.post(this.$api.comment_add, {
					article_id: this.article_id,
					content: this.content,
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '评价提交成功',
							icon: 'none'
						})
						this.content = ''
						this.page = 1
						this.limit = 10
						this.list = []
						this.checkShow = true
						this.articleDetail()
						this.articleCommentList()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.position-fixed-bottom1 {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx;
		width: 100%;
	}

	.index-btn {
		border: none;
		// width: 60rpx;
	}

	.info-popup-btn {
		width: 300rpx;
		height: 70rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		background: #5BC9A6;
		border-radius: 35rpx 35rpx 35rpx 35rpx;
	}

	.input-fixed {
		padding: 20rpx 30rpx;
		background-color: #eeeeee;
		border-radius: 40rpx;
		font-size: 15px;
		color: #000;
	}
</style>